<template>
    <div class="communicate-contain white-bg pt20">
        <ul class="flex-row-start pr40 mb20">
            <li>
                <el-input type="text"
                    v-model="params.componeyName"
                    placeholder="请输入用户名称"
                    class="searc-input mr25"
                />
            </li>
            <li>
                <el-input type="text"
                    v-model="params.jobName"
                    placeholder="请输入职位名称"
                    class="searc-input"
                />
                <button class="green-bg white pl10 pr10 pt10 pb10 radius ml20"
                    @click="toSearch"
                >
                    <i class="el-icon-search"></i>
                </button>
            </li>
        </ul>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="companyName" style="width: 33.33%;">
                <template slot="header" slot-scope="scope">
                    <p>
                        用户名称
                    </p>
                </template>
                <template slot-scope="scope">
                    <div class="flex-row-start">
<!--                        <div>
                            <el-avatar size="large" :src="`circleUrl || '' `"></el-avatar>
                        </div>-->
                        <div class="ml5">
                            <p class="black">
                                {{ scope.row.accountName }}
                            </p>
                            <span class="grey">
                                <!-- 不限户籍   -->
                            </span>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="positionName" style="width: 33.33%">
                <template slot="header" slot-scope="scope">
                    <p>
                        职位名称
                    </p>
                </template>
                <template slot-scope="scope">
                    <p class="black">
                        {{ scope.row.positionName }}
                    </p>
                    <span class="grey">
                        <!-- 装修工·未融资 -->
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="address">
                <template slot="header" slot-scope="scope">
                    <p>
                        操作
                    </p>
                </template>
                <template slot-scope="scope">
                    <div>
                        <el-badge is-dot v-if=!scope.row.isCompanyRead  class="item">
                            <a @click="toLook(scope.row)" class="black">
                                查看
                            </a>
                        </el-badge>
                        <a v-else @click="toLook(scope.row)" class="black">
                            查看
                        </a>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div class="pt30 text-c">
            <el-pagination
                background
                :layout="pagination.layout"
                :total="pagination.total"
                :page-sizes="pagination.pageSizes"
                :current-page.sync="pagination.page"
                @current-change="pageChange"
                @size-change="sizeChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>

    import { getCommunicateList } from '@/api/base'
    import moment from 'moment'
    import { checkResponse } from '@/utils'

    export default {
        name: 'enterpriseWorkCommunicate',
        components: {},
        data() {
            return {
                tableData: [],
                params: {
                    componeyName: '',
                    jobName: ''
                }
            }
        },
        created() {
            this.getData({...this.params, ...this.requestData})
        },
        methods: {
            // 获取数据
            getData(paramdData) {
                getCommunicateList( paramdData ).then( res => {
                    console.log(res)
                    this.tableData = res.data
                    this.pagination.total = res.count
                })
            },
            // 搜索内容
            toSearch() {
                this.requestData.limit = 10
                this.requestData.page = 1
                this.getData({...this.params, ...this.requestData})
            },
            // 查看跳转
            toLook(obj) {
                this.$router.push(`/enterprise/work/chat-detail?accountId=${obj.accountId}&accountName=${obj.accountName}&resumeId=${obj.resumeId}&resumeName=${obj.resumeName}&companyId=${obj.companyId}&companyName=${obj.companyName}&positionId=${obj.positionId}&positionName=${obj.positionName}`)
            }
        }
    }
</script>


<style lang="scss">
    @import "../../../assets/styles/enterprise/common.css";

    .pt60 {
        padding-top: 60px;
    }

    .communicate-contain {
        .searc-input {
            width: 200px;
        }
        .grey {
            color: #ddd;
        }
        .el-badge__content.is-fixed {
            top: 10px;
        }
        .el-badge__content.is-fixed.is-dot{
            right: -2px;
        }
        .el-badge__content.is-dot{
            width: 11px;
            height: 11px;
        }

    }
</style>
